#app{
    background: #f5f5f5;
    min-height: 100vh;
}
.list{
    padding: .5rem .24rem;
}

.im-left{
    display: flex;
}
.im-left img{
    width: .49rem;
height: .49rem;
background: #999999;
border-radius: 50%;
margin-right: .17rem;
overflow: hidden;
}
 .im-name{
    font-size: .24rem;
font-weight: bold;
color: #5D636F;
}
.im-msg-left{
    width: 6.05rem;
min-height: .64rem;
background: #FFFFFF;
border-radius: .10rem .10rem .10rem .30rem;
margin-left: .45rem;
font-size: .25rem;
color: #444;
padding: .17rem .24rem;
}

.im-msg-right{
    width: 6.06rem;
    min-height: .64rem;
    background: #9ED442;
    border-radius: .10rem .10rem .30rem .10rem;font-size: .25rem;
margin-left: .5rem;
color: #fff;
    padding: .2rem .24rem;
}

.im-item{
    margin-bottom: .6rem;
  
}
.im-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    margin-bottom: .05rem;
}
.im-right .im-name{
    color: #9ED442;
margin-right: .31rem;
}
.im-right .cover{
    width: .49rem;
    height: .49rem;
    background: #999999;
    border-radius: 50%;
    margin-right: .17rem;
    overflow: hidden;
}
.input-bottom{
    position: fixed;
    bottom: 0;
    width: 7.5rem;
    height: 1rem;
    background: #fff;
    left: 0;
    padding-left: .37rem;
    padding-top: .16rem;
    display: flex;
}
.input-bottom .input{
    width: 5.52rem;
height: .52rem;
background: #F5F5F5;
margin-right: .34rem;
font-size: .2rem;
color: #7E7E7E;
border-radius: .26rem;
display: flex;
align-items: center;
padding-left: .2rem;
}
.input-bottom  .button{
    width: .72rem;
height: .51rem;
background: #9ED442;
border-radius: .25rem;
font-size: .2rem;
}